<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <base href="/">
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAdmin.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main_dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAnalysis.css"/>
    {#    <script type="text/javascript" src="../static/js/jquery-1.8.0.min.js"></script>#}
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="../static/js/public.js"></script>
    <script type="text/javascript" src="../static/js/jquery.js"></script>

    <style>
        .data_input {
            background-color: #D9D9D9;
            height: 150px;
        }

        .chart_display {
            margin-top: 7px;
            background-color: #f2f2f2;
            height: 500px;
        }

        .import_data {
            background-color: #c9cac9;
            height: 40px;
            margin-top: 5px;
            width: 200px;
            margin-left: 40px;
            line-height: 40px;
        }

        .input_data {
            background-color: #c4c4c4;
            width: 700px;
            height: 40px;
            margin-top: 5px;
            margin-left: 40px;
            line-height: 40px;
        }

        .input_data input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 14px;
            font-size: 12px;
            width: 180px;
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        .create_charts {
            background-color: #c4c4c4;
            width: 100px;
            height: 40px;
            margin-left: 800px;
            margin-top: -40px;
            line-height: 40px;
        }

        .button {
            background: #599bb3;
            background-image: -webkit-linear-gradient(top, #599bb3, #408c99);
            background-image: -moz-linear-gradient(top, #599bb3, #408c99);
            background-image: -ms-linear-gradient(top, #599bb3, #408c99);
            background-image: -o-linear-gradient(top, #599bb3, #408c99);
            background-image: linear-gradient(to bottom, #599bb3, #408c99);
            -webkit-border-radius: 8;
            -moz-border-radius: 8;
            border-radius: 8px;
            text-shadow: 0px 1px 0px #3d768a;
            -webkit-box-shadow: 0px 10px 14px -7px #276873;
            -moz-box-shadow: 0px 10px 14px -7px #276873;
            box-shadow: 0px 10px 14px -7px #276873;
            font-family: Arial;
            color: #ffffff;
            font-size: 12px;
            padding: 12px 14px 12px 14px;
            text-decoration: none;
        }

        .button:hover {
            color: #ffffff;
            background: #408c99;
            text-decoration: none;
        }

        body {
            background: #F6F8FA;
        }


        .nav {
            background-color: #a5aca4;
            height: 80px;
            width: 1330px;
            margin-left: 5px;
            margin-right: 5px;

        }

        .content {
            width: 1330px;
            background-color: #fff;
            margin-top: 7px;
            height: 400px;
            margin-left: 7px;
        }

        .rotation-chart {
            width: 1330px;
            background-color: #fff;
            margin-top: 8px;
            height: 30px;
            margin-left: 7px;
        }

        .footer {
            width: 1330px;
            background-color: #312c2c;
            margin-top: 5px;
            height: 80px;
            margin-left: 7px;
            margin-bottom: 5px;
        }

        .logo {
            width: 250px;
            height: 80px;
            background-color: #aee6a6;
            margin-left: 10px;
        }

        .logo img {
            width: 250px;
            height: 80px;
        }

        .left {
            background-color: #363a45;
            height: 800px;
            width: 265px;
            float: left;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 7px;
        }
    </style>
</head>
<body>
<div class="container" id="container" style="">
    <!--nav-->
    <div class="nav">
        <div class="logo">
            <img src="../static/img/logo.jpg">
        </div>
    </div>
   <nav>
        <!--导航条-->
        <ul class="nav-main">
            <li><a href="">首页</a></li>
            <li id="li-1">在线数据分析<span></span></li>
            <li id="li-2">数据社区<span></span></li>
            <li id="li-3">数据可视化<span></span></li>
            <li><a href="/analysis_case/">案例展示</a></li>
            <li><a href="/contact/">联系我们</a></li>
            <li><a href="/help/">帮助中心</a></li>
        </ul>
        <!--隐藏盒子-->
        <div id="box-1" class="hidden-box hidden-loc-index">
            <ul>
                <li><a href="/analysis/">数据分析</a></li>
            </ul>
        </div>
        <div id="box-2" class="hidden-box hidden-loc-us">
            <ul>
                <li><a href="/codeopen/">代码开源</a></li>
                <li><a href="/datanews/">数据分析资讯</a></li>
            </ul>
        </div>
        <div id="box-3" class="hidden-box hidden-loc-info">
            <ul>
                <li><a href="/visualization/bar/">数据可视化</a></li>
            </ul>
        </div>
    </nav>
    <div class="left">
        <div class="menu" id="menu">
            <div class="wrap">
                <div class="header_menu">Python数据可视化</div>
                <div class="nav1">
                    <ul>
                        <li class="list">
                            <h2><i></i>直角坐标系图表</h2>
                            <div class="hide">
                                <a href="/visualization/bar/"><h5>柱状图</h5></a>
                                <a href="/visualization/box/"><h5>箱型图</h5></a>
                                <a href="/visualization/k_chart/"><h5>K线图</h5></a>
                                <a href="/visualization/pie/"><h5>面积图</h5></a>
                                <a href="/visualization/scatter/"><h5>散点图</h5></a>
                                <a href="/visualization/line/"><h5>折线图</h5></a>
                            </div>
                        </li>
                        <li class="list">
                            <h2><i></i>基本图表</h2>
                            <div class="hide">
                                <a href="/visualization/funnel/"><h5>漏斗图</h5></a>
                                {#                                <a href="/visualization/bar/"><h5>关系图</h5></a>#}
                                <a href="/visualization/pie/"><h5>饼图</h5></a>
                                <a href="/visualization/radar/"><h5>雷达图</h5></a>
                                <a href="/visualization/wordCloud/"><h5>词云图</h5></a>
                                <a href="/visualization/calendar/"><h5>日历图</h5></a>
                            </div>
                        </li>

                        <li class="list">
                            <h2><i></i>3D图表</h2>
                            <div class="hide">
                                <a href="/visualization/threeD_bar/"><h5>3D柱状图</h5></a>
                                <a href="/visualization/threeD_Line/"><h5>3D折线图</h5></a>
                                <a href="/visualization/threeD_scatter/"><h5>3D散点图</h5></a>
                            </div>
                        </li>
                        <li class="list">
                            <h2><i></i>树形图表</h2>
                            <div class="hide">
                                <a href="/visualization/bar/"><h5>树图</h5></a>
                                <a href="/visualization/bar/"><h5>矩形树图</h5></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content1" id="content1">
        <div class="data_input">
            <form action="/demo/bar_demo/" method="post">
                {% csrf_token %}
                {#            <div class="import_data"></div>#}
                <div class="input_data">
                    <table border="1" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>输入标题&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入标题" name="bar_title"></td>
                            <td>输入副标题&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入副标题" name="bar_subtitle"></td>
                        </tr>
                        <tr>
                            <td>输入x轴&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入x轴数据,以逗号隔开" name="x_values"></td>
                            <td>输入y轴&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入y轴数据,以逗号隔开" name="y_values"></td>
                        </tr>
                        <tr>
                            <td>导入CSV数据</td>
                            <td>
                                <input type="file" name="import_csv">
                            </td>
                            <td>

                            </td>
                            <td>
                                {#                                <button class="button" name="create_chart">创建图表</button>#}
                                <input type="submit" name="create_chart">
                            </td>
                        </tr>
                    </table>
                </div>
                {#            <div class="create_charts">#}
                {##}
                {##}
                {#            </div>#}
            </form>
        </div>
        <div class="chart_display">
            <div class="chart">
                <div id="bar" style="width:700px; height:500px;">

                </div>
            </div>
        </div>
    </div>
    <div class="footer" id="footer">
        版权 © dry
    </div>

</div>
<script>
    (function () {
        var oList = document.querySelectorAll('.list h2'),
            oHide = document.querySelectorAll('.hide'),
            oIcon = document.querySelectorAll('.list i'),
            lastIndex = 0;
        for (var i = 0; i < oList.length; i++) {
            oList[i].index = i;//自定义属性
            oList[i].isClick = false;
            oList[i].initHeight = oHide[i].clientHeight;
            oHide[i].style.height = '0';
            oList[i].onclick = function () {
                if (this.isClick) {
                    oHide[this.index].style.height = '0';
                    oIcon[this.index].className = '';
                    oList[this.index].className = '';
                    oList[this.index].isClick = false;
                } else {
                    oHide[lastIndex].style.height = '0';
                    oIcon[lastIndex].className = '';
                    oList[lastIndex].className = '';
                    oHide[this.index].style.height = '220px';
                    oIcon[this.index].className = 'on';
                    oList[this.index].className = 'on';
                    oList[lastIndex].isClick = false;
                    oList[this.index].isClick = true;
                    lastIndex = this.index;
                }
            }
        }
    })();

</script>
<script>
    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

    $(
        function () {
            fetchData(chart);
        }
    );

    function fetchData() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8000/demo/bar/",
            dataType: 'json',
            success: function (result) {
                chart.setOption(result.data);
            }
        });
    }
</script>
<script src="../static/js/index.js"></script>
</body>
</html>